<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>权宜购物平台</title>

<link href="${pageContext.request.contextPath}/css/slider.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet" type="text/css"/>
	<style>
		.banner {
			position: relative;
			overflow: auto;
			text-align: center;
		}

		.banner li {
			list-style: none;
		}

		.banner ul li {
			float: left;
		}

		#b04 {
			width: 740px;
			margin: 5px auto;
		}

		#b04 .dots {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20px;
		}

		#b04 .dots li {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 0 4px;
			text-indent: -999em;
			border: 2px solid #fff;
			border-radius: 6px;
			cursor: pointer;
			opacity: .4;
			-webkit-transition: background .5s, opacity .5s;
			-moz-transition: background .5s, opacity .5s;
			transition: background .5s, opacity .5s;
		}

		#b04 .dots li.active {
			background: #fff;
			opacity: 1;
		}

		#b04 .arrow {
			position: absolute;
			top: 200px;
		}

		#b04 #al {
			left: 15px;
		}

		#b04 #ar {
			right: 15px;
		}

		.tabContent img{
			width: 100%;
		}
	</style>
</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="container index">
	<div class="span24">
		<div class="banner" id="b04">
			<ul>
				<li><img src="${pageContext.request.contextPath}/image/1.jpg" alt="" width="740" height="380"></li>
				<li><img src="${pageContext.request.contextPath}/image/2.jpg" alt="" width="740" height="380"></li>
				<li><img src="${pageContext.request.contextPath}/image/3.jpg" alt="" width="740" height="380"></li>
				<li><img src="${pageContext.request.contextPath}/image/4.jpg" alt="" width="740" height="380"></li>
			</ul>
			<a href="javascript:void(0);" class="unslider-arrow04 prev">
				<img class="arrow" id="al"
					 src="${pageContext.request.contextPath}/image/arrowl.png"
					 alt="prev" width="20" height="35">
			</a>
			<a href="javascript:void(0);" class="unslider-arrow04 next">
				<img class="arrow" id="ar"
					 src="${pageContext.request.contextPath}/image/arrowr.png"
					 alt="next" width="20" height="37">
			</a>
		</div>
		<script>
            $(document).ready(function (e) {
                var unslider04 = $('#b04').unslider({
                        dots: true
                    }),
                    data04 = unslider04.data('unslider');

                $('.unslider-arrow04').click(function () {
                    var fn = this.className.split(' ')[1];
                    data04[fn]();
                });
            });
		</script>
	</div>
	<div class="span24">
		<div id="hotProduct" class="hotProduct clearfix">
			<div class="title">
				<strong>最热商品</strong>
			</div>
			<ul class="tab">
				<li class="current">
					<a href="./categories.jsp?tagIds=1" target="_blank"></a>
				</li>
				<li>
					<a target="_blank"></a>
				</li>
				<li>
					<a target="_blank"></a>
				</li>
			</ul>
			<ul class="tabContent">
				<c:forEach var="h" items="${requestScope.hotProducts}">
					<li>
						<a href="/findById?pid=${h.pid}" target="_blank">
							<img
									src="${pageContext.request.contextPath}/${h.image}"
									title="${h.pname}" alt="${h.pname}"
									style="display: block;">
							<div style="text-align: center;text-decoration: none;">${h.pname}</div>
						</a>
					</li>
				</c:forEach>
			</ul>
		</div>
	</div>
	<div class="span24">
		<div id="newProduct" class="newProduct clearfix">
			<div class="title">
				<strong>最新商品</strong>
				<a target="_blank"></a>
			</div>
			<ul class="tab">
				<li class="current">
					<a href="./categories.jsp?tagIds=2" target="_blank"></a>
				</li>
				<li>
					<a target="_blank"></a>
				</li>
				<li>
					<a target="_blank"></a>
				</li>
			</ul>
			<ul class="tabContent" style="display: block;">
				<c:forEach var="n" items="${requestScope.newProducts}">
					<li>
						<a href="/findById?pid=${n.pid}" target="_blank">
							<img src="${pageContext.request.contextPath}/${n.image}"
								 title="${n.pname}" alt="${n.pname}"
								 style="display: block;">
							<div style="text-align: center;text-decoration: none;">${n.pname}</div>
						</a>
					</li>
				</c:forEach>
			</ul>
		</div>
	</div>
	<c:if test="${sessionScope.enterUser != null}">
		<div class="span24">
			<div id="remendProduct" class="newProduct clearfix">
				<div class="title">
					<strong>你可能喜欢</strong>
					<a target="_blank"></a>
				</div>
				<ul class="tab">
					<li class="current">
						<a href="./categories.jsp?tagIds=2" target="_blank"></a>
					</li>
					<li>
						<a target="_blank"></a>
					</li>
					<li>
						<a target="_blank"></a>
					</li>
				</ul>
				<ul class="tabContent" style="display: block;">
					<c:forEach var="n" items="${requestScope.recomendProducts}">
						<li>
							<a href="/findById?pid=${n.pid}" target="_blank">
								<img src="${pageContext.request.contextPath}/${n.image}"
									 title="${n.pname}" alt="${n.pname}"
									 style="display: block;">
								<div style="text-align: center;text-decoration: none;">${n.pname}</div>
							</a>
						</li>
					</c:forEach>
				</ul>
			</div>
		</div>
	</c:if>

	<div class="span24">
		<div class="friendLink">
			<dl>
				<dt>新手指南</dt>
				<dd>
					<a target="_blank">支付方式</a>
					|
				</dd>
				<dd>
					<a target="_blank">配送方式</a>
					|
				</dd>
				<dd>
					<a target="_blank">售后服务</a>
					|
				</dd>
				<dd>
					<a target="_blank">购物帮助</a>
					|
				</dd>
				<dd>
					<a target="_blank">蔬菜卡</a>
					|
				</dd>
				<dd>
					<a target="_blank">礼品卡</a>
					|
				</dd>
				<dd>
					<a target="_blank">银联卡</a>
					|
				</dd>
				<dd>
					<a target="_blank">亿家卡</a>
					|
				</dd>

				<dd class="more">
					<a>更多</a>
				</dd>
			</dl>
		</div>
	</div>
</div>
<div class="container footer">
	<div class="span24">
		<div class="footerAd">
			<img src="${pageContext.request.contextPath}/image/footer.jpg" width="950" height="52" alt="我们的优势"
				 title="我们的优势">
		</div>
	</div>
	<div class="span24">
		<ul class="bottomNav">
			<li>
				<a>关于我们</a>
				|
			</li>
			<li>
				<a>联系我们</a>
				|
			</li>
			<li>
				<a>招贤纳士</a>
				|
			</li>
			<li>
				<a>法律声明</a>
				|
			</li>
			<li>
				<a>友情链接</a>
				|
			</li>
			<li>
				<a target="_blank">支付方式</a>
				|
			</li>
			<li>
				<a target="_blank">配送方式</a>
				|
			</li>
			<li>
				<a>服务声明</a>
				|
			</li>
			<li>
				<a>广告声明</a>

			</li>
		</ul>
	</div>
	<div class="span24">
		<div class="copyright">Copyright © 2005-2015 网上商城 版权所有</div>
	</div>
</div>
</body>
</html>